<template>
	<div class="user-select">
		<slot>
			<el-input :value="selectName" readonly @click.native="onOpenDialog"></el-input>
		</slot>

		<el-dialog :visible.sync="visible" :title="title" modal-append-to-body append-to-body lock-scroll>
			<el-tabs v-model="active" type="border-card">
				<el-tab-pane name="group" label="会员组">
					<el-table :data="userGroup" @row-click="onGroupHandleChange">
						<el-table-column width="55px">
							<template #header>
								<el-checkbox v-model="isGroupCheckAll"></el-checkbox>
							</template>
							<template #default="{row}">
								<el-checkbox :value="userGroupSelectIds.includes(row.id)" @change="onGroupHandleChange(row)"></el-checkbox>
							</template>
						</el-table-column>
						<el-table-column label="分组名" prop="name"></el-table-column>
						<el-table-column prop="remark" label="分组备注" :show-overflow-tooltip="true"></el-table-column>
					</el-table>
				</el-tab-pane>
				<el-tab-pane name="users" label="会员">
					<el-table :data="member.list" @row-click="onMemberHandleChange">
						<el-table-column width="55px">
							<template #header>
								<el-checkbox v-model="isMemberCheckAll"></el-checkbox>
							</template>
							<template #default="{row}">
								<el-checkbox :value="memberSelectIds.includes(row.id)" @change="onMemberHandleChange(row)"></el-checkbox>
							</template>
						</el-table-column>
						<el-table-column label="头像" prop="avatar">
							<template #default="{row}">
								<el-image :src="row.avatar" style="width: 50px; height: 50px"></el-image>
							</template>
						</el-table-column>
						<el-table-column label="用户名称" prop="nickName"></el-table-column>
						<el-table-column label="手机号" prop="phone"></el-table-column>
						<el-table-column label="注册时间" prop="createTime"></el-table-column>
					</el-table>
					<br />
					<fortress-pagination
						:total="member.total"
						:current-page="member.current"
						:page-size="this.member.size"
						@refreshData="onCurrentChange"
					></fortress-pagination>
				</el-tab-pane>
			</el-tabs>

			<template #footer>
				<el-button @click="onCancel">取 消</el-button>
				<el-button type="primary" @click="onConfirm">确 定</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script>
import request from "@/common/request"
import FortressPagination from "@/components/fortress-pagination.vue"

export default {
	name: "user-select",
	model: {
		prop: "value",
		event: "update:value",
	},
	props: {
		title: {
			type: String,
			default: "选择用户",
		},
		value: {
			type: Object,
			default: () => ({
				userGroup: [],
				member: [],
			}),
		},
	},
	data() {
		return {
			visible: false,
			active: "group",

			userGroup: [],
			userGroupSelect: [],

			member: {
				list: [],
				current: 1,
				total: 0,
				size: 10,
			},
			memberSelect: [],

			selectName: "",
		}
	},
	computed: {
		userGroupSelectIds() {
			return this.userGroupSelect.map(item => item.id)
		},
		memberSelectIds() {
			return this.memberSelect.map(item => item.id)
		},

		isGroupCheckAll: {
			get() {
				return this.userGroup.every(item => this.userGroupSelectIds.includes(item.id))
			},
			set(value) {
				if (value) {
					this.userGroupSelect = this.userGroup
				} else {
					this.userGroupSelect = []
				}
			},
		},
		isMemberCheckAll: {
			get() {
				return this.member.list.every(item => this.memberSelectIds.includes(item.id))
			},
			set(value) {
				if (value) {
					this.memberSelect = this.member.list
				} else {
					this.memberSelect = []
				}
			},
		},
	},
	created() {
		this.getMemberGroup()
		this.getMember()
	},
	methods: {
		async getMemberGroup() {
			try {
				const { code, data, msg } = await request("get", "/member/memberGroup/list")
				if (code != 0) {
					throw new Error(msg)
				}
				this.userGroup = data
			} catch (error) {
				this.$message.error(error.message)
			}
		},
		async getMember() {
			try {
				const {
					code,
					msg,
					data: { records, total },
				} = await request("get", "/member/member/page", {
					current: this.member.current,
					size: this.member.size,
				})
				if (code != 0) {
					throw new Error(msg)
				}
				this.member.list = records
				this.member.total = total
			} catch (error) {
				this.$message.error(error.message)
			}
		},
		onCurrentChange({ current, size }) {
			this.member.current = current
			this.member.size = size
			this.getMember()
		},

		onOpenDialog() {
			this.visible = true
		},
		onGroupHandleChange(row) {
			if (this.userGroupSelectIds.includes(row.id)) {
				this.userGroupSelect = this.userGroupSelect.filter(item => item.id != row.id)
			} else {
				this.userGroupSelect.push(row)
			}
		},
		onMemberHandleChange(row) {
			if (this.memberSelectIds.includes(row.id)) {
				this.memberSelect = this.memberSelect.filter(item => item.id != row.id)
			} else {
				this.memberSelect.push(row)
			}
		},

		onCancel() {
			this.userGroupSelect = []
			this.memberSelect = []
			this.visible = false
		},
		onConfirm() {
			this.setSelectName()
			this.visible = false

			this.$emit("update:value", {
				userGroup: this.userGroupSelect,
				member: this.memberSelect,
			})
			this.$emit("change", {
				userGroup: this.userGroupSelect,
				member: this.memberSelect,
			})
		},

		setSelectName() {
			console.log(this.userGroupSelect)
			this.selectName = this.userGroupSelect.map(item => item.name).join(",")
			if (this.memberSelect.length > 0) {
				this.selectName = [this.selectName, this.memberSelect.map(item => item.nickName).join(",")].filter(Boolean).join(",")
			}
		},
	},
	watch: {
		value: {
			handler(value) {
				this.userGroupSelect = value.userGroup || []
				this.memberSelect = value.member || []

				this.setSelectName()
			},
			immediate: true,
		},
	},
	components: {
		FortressPagination,
	},
}
</script>

<style lang="scss" scoped>
.user-select {
}
</style>
